<template>
    <div class="divBox">
      <el-card class="box-card">
        <!-- <div slot="header" class="clearfix">
          <div class="container">
            <el-form label-width="100px" :inline="true">
              <el-form-item>
                <el-date-picker v-model="dateLimit" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small" type="daterange" placement="bottom-end" placeholder="自定义时间" style="width: 220px;" @change="onchangeTime" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getList(1)" size="small">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div> -->
        <el-table
          v-loading="listLoading"
          :data="tableData.data"
          style="width: 100%"
          size="mini"
          class="table"
          highlight-current-row
        >
          <el-table-column
            prop="id"
            label="ID"
            width="80"
          />
          <el-table-column
            prop="designerId"
            label="设计师ID"
            width="80"
          />
          <el-table-column
            prop="designerName"
            label="设计师姓名"
            width="80"
          />
          <el-table-column
            prop="designerLevel"
            label="设计师等级"
            min-width="80"
          />
          <el-table-column
            prop="account"
            label="账号"
            width="150"
          />
          <el-table-column
            prop="commissionAmount"
            label="佣金"
            min-width="100"
          />
          <el-table-column
            label="佣金比例"
            min-width="80"
            prop="commissionRate"
          />
          <!-- <el-table-column label="销售总额" min-width="150">
            <template slot-scope="scope">
              <span :class="scope.row.type == 1 ? 'color_red': 'color_green'">{{scope.row.type == 1 ? '+' : '-' }}{{scope.row.price}}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="销售总额" min-width="130" prop="salesAmount">
          </el-table-column>
          <el-table-column label="销售日期" min-width="130" prop="salesDate">
          </el-table-column>
          <el-table-column label="创建时间" min-width="130" prop="createTime">
          </el-table-column>
          <el-table-column label="更新时间" min-width="130" prop="updateTime">
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :page-sizes="[20, 40, 60, 80]"
            :page-size="tableFrom.limit"
            :current-page="tableFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="pageChange"
          />
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
    import { brokerageListApi } from '@/api/designer'
    export default {
      name: 'DesignerBrokerage',
      data() {
        return {
          dateLimit: [],
          tableData: {
            data: [],
            total: 0
          },
          listLoading: true,
          tableFrom: {
            dateLimit: '',
            page: 1,
            limit: 20
          },
          fromList: this.$constants.fromList,
          options: [],
          statusOptions:[
            { value: 'WAIT_ACCEPT', label: '待受理'},
            { value: 'ACCEPTED', label: '已受理'},
            { value: 'PROCESSING', label: '转账中'},
            { value: 'FINISHED', label: '已完成'},
            { value: 'CLOSED', label: '已关闭'},
          ],
        }
      },
      mounted() {
        // this.getTypes()
        this.getList()
      },
      methods: {
        // 列表
        getList(num) {
          this.listLoading = true
          this.tableFrom.page = num ? num : this.tableFrom.page;
          brokerageListApi(this.tableFrom).then(res => {
            this.tableData.data = res.list
            this.tableData.total = res.total
            this.listLoading = false
          }).catch((res) => {
            this.listLoading = false
          })
        },
        pageChange(page) {
          this.tableFrom.page = page
          this.getList()
        },
        handleSizeChange(val) {
          this.tableFrom.limit = val
          this.getList()
        },
        // 具体日期
        onchangeTime (e) {
          this.dateLimit = e;
          this.tableFrom.dateLimit = e ? this.dateLimit.join(',') : ''
          this.tableFrom.page = 1
          this.getList();
        },
      }
    }
  </script>
  
  <style scoped lang="scss">
    .dashboard-workplace {
      &-header {
        &-avatar {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          margin-right: 16px;
          font-weight: 600;
        }
  
        &-tip {
          width: 82%;
          display: inline-block;
          vertical-align: middle;
          margin-top: -12px;
          &-title {
            font-size: 13px;
            color: #000000;
            margin-bottom: 12px;
          }
  
          &-desc {
            width: 100%;
            &-sp {
              width: 32%;
              color: #17233D;
              font-size: 13px;
              display: inline-block;
              line-height: 25px;
            }
          }
        }
  
        &-extra {
          .ivu-col {
            p {
              text-align: right;
            }
  
            p:first-child {
              span:first-child {
                margin-right: 4px;
              }
  
              span:last-child {
                color: #808695;
              }
            }
  
            p:last-child {
              font-size: 22px;
            }
          }
        }
      }
    }
    .selWidth{
      width: 300px;
    }
    .color_red{
      color:#F5222D;
    }
    .color_green{
      color:#7ABE5C;
    }
  </style>
  